<script setup>
import {findProductOptionMinPrice} from "@/utils/XwbUtils.js";

const props = defineProps({
  product: {type: Object, default: {}}
})
</script>

<template>
  <nut-card
      class="p-2 rounded-lg bg-white dark:bg-neutral-900 dark:text-gray-100 overflow-hidden flex-center"
      :img-url="product?.imgs?.length > 0 ? product?.imgs[0]?.img : ''"
      :title="product?.title"
      :vip-price="findProductOptionMinPrice(product?.options)"
  >
    <template #prolist>
      <div>
        <el-tag
            class="mr-1" type="danger" size="small"
            v-for="label in (product?.labels?.length > 2 ? product?.labels?.slice(0, 2) : product?.labels)"
        >
          <div class="product-label">
            {{ label.name }}
          </div>
        </el-tag>
      </div>
    </template>
    <template #price>
      <span></span>
    </template>
    <template #shop-tag>
      <el-tag class="mr-1" type="info" size="small">销量：{{ product?.sale }}</el-tag>
      <el-tag type="info" size="small">
        <div class="product-delivery">
          {{ product?.delivery }}
        </div>
      </el-tag>
    </template>
  </nut-card>
</template>

<style scoped lang="scss">
.product-label,
.product-delivery {
  max-width: 5rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>